import React from "react";
import Taro from "@tarojs/taro";
import {Button, Image, Swiper, SwiperItem, Text, View} from "@tarojs/components";
import "./index.scss";

const HomePage = () => {
  const scenicBtnClick = () => {
    console.log('点击景点列表跳转到/scenic页面')
    Taro.navigateTo({
      url: '/pages/scenic/index'
    })
  }
  const introClick = () => {
    console.log('点击更多跳转到/intro页面')
    Taro.navigateTo({
      url: '/pages/intro/index'
    })
  }

  const stayClick = () => {
    console.log('点击更多跳转到/stay页面')
    Taro.navigateTo({
      url: '/pages/stay/index'
    })
  }

  const ticketClick = () => {
    console.log('点击更多跳转到/ticket页面')
    Taro.navigateTo({
      url: '/pages/ticket/index'
    })
  }

  const productClick = () => {
    console.log('点击更多跳转到/product页面')
    Taro.navigateTo({
      url: '/pages/product/index'
    })
  }

  const routeClick = () => {
    console.log('点击更多跳转到/route页面')
    Taro.navigateTo({
      url: '/pages/route/index'
    })
  }
  return (
    <View className="home-page">
      {/* 头部背景 */}
      <View className="header"></View>
      {/*头部导航*/}
      <View className="header-text">欢迎来到周家庄</View>

      {/* 功能入口 */}
      <View className="features">
        <View className="feature-item" onClick={ticketClick}>
          <Image
            src={require("../../assets/navbar/scan.png")}
            className="banner-image"
            mode="aspectFill"
          />
          <Text>预约购票</Text>
        </View>
        {/*点击景点列表跳转到/scenic页面*/}
        <View className="feature-item" onClick={scenicBtnClick}>
          <Image
            src={require("../../assets/navbar/address.png")}
            className="banner-image"
            mode="aspectFill"
          />
          <Text>景点列表</Text>
        </View>
        <View className="feature-item" onClick={routeClick}>
          <Image
            src={require("../../assets/navbar/food.png")}
            className="banner-image"
            mode="aspectFill"
          />
          <Text>路线规划</Text>
        </View>
        <View className="feature-item" onClick={productClick}>
          <Image
            src={require("../../assets/navbar/shop.png")}
            className="banner-image"
            mode="aspectFill"
          />
          <Text>当地特产</Text>
        </View>
      </View>

      {/* 在线购票按钮 */}
      <Button className="buy-ticket-button" onClick={ticketClick}>在线购票</Button>

      {/* 文章推荐 */}
      <View className="article-section" onClick={introClick}>
        <View className="article">
          <Image
            src={require("../../assets/swiper/swiper2.png")}
            className="article-image"
            mode="aspectFill"
          />
          <Text className="article-text">
            国庆带你游晋州！采摘、游园两不误！走进周家庄人民公社文旅度假区
          </Text>
          <Button className="more-button">查看更多景区介绍</Button>
        </View>
      </View>

      {/* 攻略资讯 */}
      <View className="strategy-section">
        <View className="section-header">
          <Text>攻略住宿</Text>
          <Text>更多</Text>
        </View>
        <Swiper className="strategy-list">
          <SwiperItem className="strategy-item">
            <Image
              src="https://th.bing.com/th/id/OIP.oBmqt9KKKjK2roY4itRbegHaE8?rs=1&pid=ImgDetMain"
              className="strategy-image"
              mode="aspectFill"
              onClick={stayClick}
            />
            <Text className="strategy-text">周家庄观光攻略</Text>
          </SwiperItem>
        </Swiper>
      </View>
    </View>
  );
};

export default HomePage;
